<template>
	<view class="container">
		<scroll-view class="scroll" scroll-y :refresher-threshold="50" :refresher-background="'#9EBFF5'" :refresher-enabled="false" :refresher-triggered="isRefreshing"
			@refresherrefresh="refresherrefresh" >
			<view class="top-content">
				<view class="top-title" :style="{height: statusHeight + 44 + 'px'}">
					<text class="big-title" :style="{top: menuBtnTop + 20 + 'px'}">
						小竹企服
					</text>
				</view>
				<view class="sub-head">
					<text class="small-title">
						跨区工商财税用小竹，平台担保更靠谱
					</text>
				</view>
			</view>
			
			<view style="position: absolute; top: 340rpx;">
				<view class="middle-content">
					<view class="demand" @click="postDemand">
						<view class="title">
							<text>发布需求</text>
							<view class="arrow-right">
								<text class="cuIcon-right"></text>
							</view>
						</view>
						<view class="sm-title">
							免费发布需求
						</view>
					</view>
					<view class="service" @tap="goMoreService">
						<view class="title">
							<text>找服务商</text>
							<view class="arrow-right">
								<text class="cuIcon-right"></text>
							</view>
						</view>
						<view class="sm-title">
							网点多，分布广
						</view>
					</view>
				</view>
			</view>
			
			<view class="new-demand">
				<view class="title">
					<text style="color: #333;font-size: 36rpx;font-weight: 500;">最新需求</text>
					<text style="color: #333;font-size: 26rpx;" @click="goDemandList">更多＞</text>
				</view>
				<view class="demand-list">
					<view class="list" v-for="(item, index) in demandData" :key="index" @click="goDetail(item)">
						<view class="header">
							<view class="title">
								<text class="title-icon"></text>
								<text class="name">{{item.name}}</text>
							</view>
							<view class="price">
								<text>{{item.money == 0?'面议':'¥' + item.money}}</text>
							</view>
						</view>
						<view class="main-content">
							<text>描述：{{item.describe}}</text>
						</view>
						<view class="bottom">
							<view class="local">
								<text>{{item.city_name}}</text>
								<text v-if="item.join_number > 0" style="margin-left: 14rpx;">{{item.join_number}}人投标</text>
							</view>
							<view class="join-type">
								去接单＞
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nav-tabs">
				<view class="nav">
					<u-tabs :list="tnavList" @click="menuClick" :current="tabCurrent" :activeStyle="{
								color: '#333333', fontSize: '36rpx'}" :inactiveStyle="{
								color: '#333333',fontSize: '36rpx'}" :lineWidth="30" :itemStyle="{height: '88rpx'}">
					</u-tabs>
					<text style="color: #333;font-size: 26rpx;" @tap="goMoreService">更多＞</text>
				</view>
				<view class="content">
					<!-- 服务商品列表 -->
					<view v-if="tabCurrent === 1" class="shop-list">
						<view class="shop-item" v-for="(item, index) in shopList" :key="index" @click="goShopDetail(item)">
							<view class="img">
								<image :src="item.pic[0]" mode="aspectFill"></image>
							</view>
							<view class="item">
								<text class="title1">
									{{item.name}}
								</text>
								<text class="title2">
									{{item.price == 0?'面议':'¥' + item.price}}
								</text>
								<text class="title3">
									{{item.serviceinfo.city}}丨{{item.serviceinfo.name}}
								</text>
							</view>
						</view>
						<view style="text-align: center; color: #9E9E9E;margin-top: 60rpx;" v-if="shopList.length > 0" @tap="goMoreService">
							查看更多＞
						</view>
						<view v-if="shopList.length === 0" class="empty-wrap" >
						  <image class="empty-img" src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"></image>
						  <text class="tips">暂无内容</text>
						</view>
					</view>
					
					<!-- 服务商列表 -->
					<view v-if="tabCurrent === 0" class="service-list">
						<view class="service-item" v-for="(item, index) in serviceList" :key="index" @click="goServiceInfo(item)">
							<view class="img">
								<image :src="item.logo" mode="aspectFill"></image>
							</view>
							<view class="item">
								<view class="service-type">
									<view v-if="item.type == 1" class="type">
										官方
									</view>
									<text class="title1">
										{{item.name}}
									</text>
								</view>
								<text v-if="item.good_services.length > 0" class="title2">
									擅长服务：{{item.good_services.join('、')}}
								</text>
								<view style="margin-top: 16rpx;">
									<text class="cuIcon-location"></text>
									<text class="title3">
										{{item.city}}
									</text>
								</view>
							</view>
						</view>
						<view style="text-align: center; color: #9E9E9E;margin-top: 60rpx;" v-if="serviceList.length > 0" @tap="goMoreService">
							查看更多＞
						</view>
						<view v-if="serviceList.length === 0" class="empty-wrap" >
						  <image class="empty-img" src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"></image>
						  <text class="tips">暂无内容</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 旧版首页 -->
			<!-- <view id="lubo" class="lubottus observe-view">
				<swiper class="swper" :autoplay="true" :interval="3000" :duration="1000"
					@change="onSwiperChange" :circular="true">
					<swiper-item v-for="item,index in banners" :key="index" class="swper">
						<image class="swper" :src="item.image" mode="aspectFill">
						</image>
					</swiper-item>
				</swiper>
			</view>
			
			<view class="middle-link">
				<view class="menu-list">
					<view class="menu-item">
						<view class="flex align-center">
							<image src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/homeImg/post-news.png" class="icon"></image>
							<view style="width: 2rpx; height: 30rpx; background: #C0C0C0;"></view>
							<maoScroll :data="testData" :showNum="1" :lineHeight="lineHeight" :animationScroll="animationScroll" :animation="animation">
								<template v-slot="{line}">
									<view class="link-text">
										有用户发布了<text style="color: #1C87F3;font-weight: bold;padding: 0 6rpx;">{{line.name}}</text>需求
									</view>
								</template>
							</maoScroll>
						</view>
					</view>
				</view>
			</view>
			<view class="post-demand">
				<view class="content">
					<view class="header">
						<view class="header-left">
							<image src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/homeImg/text-tag.png" class="img"></image>
							<text>我是用户 我要发布需求</text>
						</view>
						<view class="header-right" @click="postDemand">
							立即发布
						</view>
					</view>
					<view class="footer">
						<view class="footer-item">
							<view class="item-title">
								<text class="title">发布需求</text>
								<text class="icon"></text>
							</view>
							<image src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/homeImg/post_demand.png" class="img"></image>
						</view>
						<view class="footer-item">
							<view class="item-title">
								<text class="title">服务商投标</text>
								<text class="icon"></text>
							</view>
							<image src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/homeImg/service_bid.png" class="img"></image>
						</view>
						<view class="footer-item">
							<view class="item-title">
								<text class="title">选择服务商</text>
								<text class="icon"></text>
							</view>
							<image src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/homeImg/chose_service.png" class="img"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="find-demand">
				<view class="content">
					<view class="header">
						<view class="header-left">
							<image src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/homeImg/text-tag2.png" class="img"></image>
							<text>我是服务商 我要来接单</text>
						</view>
						<view class="header-right" @click="goDemandList">
							需求大厅
						</view>
					</view>
					<view class="footer">
						<view class="footer-item">
							<view class="item-title">
								<text class="title">找需求</text>
								<text class="icon"></text>
							</view>
							<image src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/homeImg/find_demand.png" class="img"></image>
						</view>
						<view class="footer-item">
							<view class="item-title">
								<text class="title">与用户沟通</text>
								<text class="icon"></text>
							</view>
							<image src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/homeImg/customer_chat.png" class="img"></image>
						</view>
						<view class="footer-item">
							<view class="item-title">
								<text class="title">开始服务</text>
								<text class="icon"></text> 
							</view> 
							<image src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/homeImg/start_service.png" class="img"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="service-category">
				<view class="content">
					<view class="header">
						<view class="header-left">
							<image src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/homeImg/service_category.png" class="img"></image>
							<text class="title">热门服务分类</text>
						</view>
						<view class="header-right" @tap="goMoreService">
							<text>更多</text>
							<text class="cuIcon-right"></text>
						</view>
					</view>
					<view class="category">
						<view class="category-item" v-for="(item, index) in categoryData" :key="index" @click="goService(item, index)">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="contact-us">
				<view class="contact-bg">
					<view class="contact-btn" @click="contactService">
						联系客服成为服务商
					</view>
				</view>
			</view> -->
		</scroll-view>
		
		<!-- 新用户优惠弹窗 -->
		<view style="height: 0;">
			<u-popup :show="discountShow" mode="center" overlayOpacity="0.8" :closeable="false" bgColor="transparent"
				:closeOnClickOverlay="false">
				<view class="new-user-discount">
					<image class="close" src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/pic/close.png" mode="scaleToFill" @click="discountShow = false">
					</image>
					<image class="discount-img" :src="activityImg" mode="widthFix"></image>
					<view class="discount-button" @click="getDiscount"></view>
				</view>
			</u-popup>
		</view>
		<!-- 新用户优惠弹窗 end -->
		
		<!-- 底部固定按钮-->
		<view class="fixed-btn" v-if="loginBtn">
			<view class="bottom-btn">
				<view class="btn-text">
					登录查看更多内容
				</view>
				<view class="btn" @click="goWxLogin">
					去登录
				</view>
			</view>
		</view>
		<!-- 底部固定按钮 end-->
	</view>
</template>

<script>
	import homeApi from "@/api/home.js"
	import demandApi from "@/api/demand.js"
	import personalApi from '@/api/personal.js'
	import serviceApi from "@/api/service.js"
	import maoScroll from '@/components/mao-scroll/mao-scroll.vue';
	let observer = null;
	export default {
		components: {
			maoScroll
		},
		data() {
			return {
				statusHeight: 0,
				menuBtnTop: 0,
				isRefreshing: false,
				
				//最新需求
				demandData: [],
				
				//轮播图参数
				swiperIndex: 0,
				banners: [],
				bannerUrl: '', //轮播图地
				lunboCurrent: 0,
				appear: false,
				
				//资讯参数
				lineHeight: 75,
				animationScroll: 800,
				animation: 2000,	
				testData: [],
				
				//分类数据
				categoryData: [],
				
				//新用户领取代金券
				discountShow: false,
				activityImg: '',
				
				inviteCode: '',
				loginBtn: true,
				
				tnavList: [
					{
						id: 0,
						name: '服务商精选',
						index: 0
					},
					{
						id: 1,
						name: '服务精选',
						index: 1
					}
				],
				
				tabCurrent: 0,
				
				//服务商品列表
				shopList: [],
				shopStatus: 'nomore',
				
				//服务商列表
				serviceList: [],
				serviceStatus: 'nomore',
				
				servicePage: 1,
				servicePageSize: 10,
				shopPage: 1,
				shopPageSize: 10,
				isRefreshing: false,
			}
		},
		onReady() {
			observer = uni.createIntersectionObserver(this, {
				observeAll: true
			});
			observer.relativeTo('.scroll').observe('.observe-view', (res) => {
				if (res.id == 'lubo') {
					if (res.intersectionRatio > 0) {
						this.appear = true;
					} else if (!res.intersectionRatio > 0) {
						this.appear = false;
					}
				}
			})
		},
		onLoad(e) {
			this.getBanner()
			this.getDemandList()
			this.getService()
			this.getServiceData()
			this.statusHeight = wx.getSystemInfoSync().statusBarHeight
			this.menuBtnTop = uni.getMenuButtonBoundingClientRect().top
			
			//小程序扫码进入
			let scene = decodeURIComponent(e.scene);
			console.log(scene, '这是刚转化完的参数')
			if(scene.indexOf("=") !== -1) {
				 let str = scene.split("=")[1]
				 console.log("我是分割之后的参数，看看我", str)
				 uni.setStorageSync('inviteCode', str)
			}
			if(e.invite_code) {
				uni.setStorageSync('inviteCode', e.invite_code)
				console.log('我已经保存了inviteCode', e.invite_code)
			}
			if(uni.getStorageSync('token')) {
				this.inviteCode = uni.getStorageSync('userInfo').invite_code
				console.log('我要分享的inviteCode', this.inviteCode)
			}
    },
    onShow() {
			this.getNewDemand()
			if(uni.getStorageSync('token') && (uni.getStorageSync('inviteCode') == 'B416492' || uni.getStorageSync('inviteCode') == 'B433702')) {
				setTimeout(() => {
					this.getActivityImg()
				}, 1000)
			}
			if(uni.getStorageSync('token')) {
				this.loginBtn = false
			}else {
				this.loginBtn = true
			}
			this.getWeChatClick()
    },
		methods: {
			//用户行为分析
			async getWeChatClick() {
				const pages = getCurrentPages()
				let currentRoute  = pages[pages.length - 1].route
				let obj = {
					type: 3,
					m_id: 9,
					describe: '小竹企服首页',
					url: currentRoute,
					code: 'WH1'
				}
				let res = await personalApi.getWechatClick(obj)
			},
			
			//微信分享
			onShareAppMessage() {
				return {
					title: '小竹企服，助力天下企业',
					path: '/pages/home/home?invite_code=' + this.inviteCode
				}
			},
			
			onShareTimeline() {
				return {
					title: '小竹企服，助力天下企业',
					query: 'invite_code=' + this.inviteCode
				}
			},
			
			//获取最新需求
			async getNewDemand() {
				let res  = await personalApi.orderStatus()
				if(res.code === 1) {
					this.demandData = res.data.recommend
				}
			},
			
			//跳转需求详情
			goDetail(item) {
				wx.requestSubscribeMessage({
				  tmplIds: ['FDa3cltqtpSJ-1enjsx3vym6nRR8r1CDMpJQkUpr2DQ', 'maUnBJPtl6zy5bnMvtfPHDJtJbSkwhywbg7FUjoM3Vc'],
				  success (res) {
						console.log(res)
				  }
				})
				uni.navigateTo({
					url: '/pagesDemand/demandDetail/demandDetail?id=' + item.id
				})
			},
			
			//tab栏切换
			menuClick(e) {
				this.tabCurrent = e.index
				if(e.id === 0) {
					this.servicePage = 1
					this.getServiceData()
				}else {
					this.shopPage = 1
					this.getShopData()
				}
			},
			
			//服务商品列表
			async getShopData() {
				this.shopStatus = 'loading'
				uni.showLoading({
					title: '加载中'
				})
				let obj = {
					is_recommend: 1,
					page: this.shopPage,
					pagesize: this.shopPageSize,
				}
				let res = await serviceApi.getShopList(obj) 
				if (res.code === 1) {
					let arr = []
					if (this.shopPage == 1) {
						this.shopList = []
					}
					let newList = res.data
					if (newList.length >= this.shopPageSize) {
						this.shopStatus = 'more'
					} else {
						this.shopStatus = 'nomore'
					}
					let arr1 = arr.concat(newList)
					arr1.forEach(val => {
						let obj = {
							id: val.id,
							name: val.name,
							pic: val.pic.split(','),
							price: val.price,
							serviceinfo: val.serviceinfo
						}
						this.shopList.push(obj)
					})
					this.isRefreshing = false
					uni.hideLoading()
				}else {
					this.$common.msgShow(res.msg)
				}
			},
			
			//服务商列表
			async getServiceData() {
				this.serviceStatus = 'loading'
				uni.showLoading({
					title: '加载中'
				})
				let obj = {
					is_recommend: 1,
					page: this.servicePage,
					pageSize: this.servicePageSize
				}
				let res = await serviceApi.getServiceList(obj)
				if(res.code === 1) {
					let arr = []
					if (this.servicePage == 1) {
						this.serviceList = []
					}
					let newList = res.data.list
					if (newList.length >= this.servicePageSize) {
						this.serviceStatus = 'more'
					} else {
						this.serviceStatus = 'nomore'
					}
					let arr1 = arr.concat(newList)
					arr1.forEach(val => {
						let obj = {
							id: val.id,
							name: val.name,
							logo: val.logo,
							good_services:val.good_services,
							city: val.city,
							type: val.type
						}
						this.serviceList.push(obj)
					})
					this.isRefreshing = false
					uni.hideLoading()
				}else {
					this.$common.msgShow(res.msg)
				}
			},
			
			//跳转服务商品详情
			goShopDetail(item) {
				wx.requestSubscribeMessage({
				  tmplIds: ['FDa3cltqtpSJ-1enjsx3vym6nRR8r1CDMpJQkUpr2DQ', 'maUnBJPtl6zy5bnMvtfPHDJtJbSkwhywbg7FUjoM3Vc'],
				  success (res) {
						console.log(res)
				  }
				})
				uni.navigateTo({
					url: "/pagesShop/shopDetail/shopDetail?id=" + item.id 
				})
			},
			
			//跳转服务商详情
			goServiceInfo(item) {
				wx.requestSubscribeMessage({
				  tmplIds: ['FDa3cltqtpSJ-1enjsx3vym6nRR8r1CDMpJQkUpr2DQ', 'maUnBJPtl6zy5bnMvtfPHDJtJbSkwhywbg7FUjoM3Vc'],
				  success (res) {
						console.log(res)
				  }
				})
				uni.navigateTo({
					url:'/pagesShop/serviceDetail/serviceDetail?id=' + item.id
				})
			},
			
			//获取banner图
			async getBanner() {
				let obj = {
					type: 9
				}
				let res = await homeApi.getBannerList(obj)
				if (res.code === 1) {
					this.isRefreshing = false
					this.banners = res.data
				} else {
					this.$common.msgShow(res.msg)
				}
			},
			
			//轮播图事件
			onSwiperChange(e) {
				this.swiperIndex = e.detail.current
			},
			
			//获取服务列表
			async getService() {
				let res = await homeApi.getServiceCate()
				console.log(res)
				if(res.code === 1) {
					this.categoryData = res.data
					this.isRefreshing = false
				}else {
					this.$common.msgShow(res.msg)
				}
			},
			
			
			//获取活动图片
			async getActivityImg() {
				const res = await homeApi.getActivityImg()
				if (res.code == 1) {
					this.discountShow = true
					this.activityImg = res.data
				}
			},
			
			//新用户领取优惠卷
			async getDiscount() {
				this.discountShow = false
				const ots = await homeApi.getActivity()
				if (ots.code === 1) {
					this.$common.msgShow('恭喜您，领取成功')
					uni.removeStorageSync('inviteCode')
				}else {
					uni.removeStorageSync('inviteCode')
					this.$common.msgShow(ots.msg)
				}
			},
			
			//前往更多服务分类
			goMoreService() {
				uni.switchTab({
					url: '/pages/service/service'
				})
			},
			
			//联系客服
			contactService() {
				wx.openCustomerServiceChat({
				  extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc8ba259d66968b838'},
				  corpId: 'ww447880e03d7eba27',
				  success(res) {
						console.log(res)
					}
				})
			},
			
			//发布需求
			postDemand() {
				wx.requestSubscribeMessage({
				  tmplIds: ['FDa3cltqtpSJ-1enjsx3vym6nRR8r1CDMpJQkUpr2DQ', 'maUnBJPtl6zy5bnMvtfPHDJtJbSkwhywbg7FUjoM3Vc'],
				  success (res) {
						console.log(res)
				  }
				})
				uni.switchTab({
					url: '/pages/postDemand/postDemand'
				})
			},
			
			//跳转需求大厅
			goDemandList() {
				wx.requestSubscribeMessage({
				  tmplIds: ['FDa3cltqtpSJ-1enjsx3vym6nRR8r1CDMpJQkUpr2DQ', 'maUnBJPtl6zy5bnMvtfPHDJtJbSkwhywbg7FUjoM3Vc'],
				  success (res) {
						console.log(res)
				  }
				})
				uni.navigateTo({
					url: '/pagesDemand/demandList/demandList'
				})
			},
			
			//跳转服务分类
			goService(item, index) {
				uni.reLaunch({
					url: "/pages/service/service?c_id=" + item.id + "&index=" + index + "&cateName=" + item.name
				})
			},
			
 			//下拉刷新
			refresherrefresh() {
				this.getService()
			},
			
			//获取滚动发布需求数据
			async getDemandList() {
				let res = await demandApi.getDemanList()
				let arr= []
				res.data.data.forEach(val => {
					let obj = {
						id: val.id,
						name: val.name
					}
					arr.push(obj)
				})
				this.testData = arr
			},
			
			
			//去往登录页
			goWxLogin() {
				uni.navigateTo({
					url: '/pagesLogin/wxLogin/wxLogin?pathType=0'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
  @import "home";
</style>
